<template>
    <div>
        <!-- 新增 -->
        <el-button size="small" @click="addHospitalHandler">新增</el-button>
        <!-- 表格 -->
        <el-table :data="hospitals.list" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="医院名称" align="center"></el-table-column>
            <el-table-column prop="introduce" label="医院简介" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="医院地址" align="center">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.province}} {{scope.row.city}} {{scope.row.area}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="flags" label="标记" align="center"></el-table-column>
            <el-table-column prop="longitude" label="经度" align="center"></el-table-column>
            <el-table-column prop="latitude" label="纬度" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            style="float:right;margin-top:1em"
            layout="total, prev, pager, next"
            @current-change="changeHandler"
            :current-page='params.page'
            :page-size='params.pageSize'
            :total="hospitals.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input type="textarea" v-model="form.introduce"></el-input>
                </el-form-item>
                <el-form-item label="省市">
                    <el-cascader
                        v-model="form.addresses"
                        :options="pca"
                        clearable
                        :props="addressProps">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="标记">
                    <el-input v-model="form.flags"></el-input>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="form.longitude"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="form.latitude"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import pca from '@/assets/pca.json'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 5
            },
            title:'',
            dialogVisible: false,
            form: {},
            pca,
            addressProps:{children:'children',label:'name',value:'name'},
        }
    },
    created() {
        this.queryHospitals(this.params)
    },
    computed: {
        ...mapState("hospital",["hospitals"])
    },
    watch: {
        params: {
            handler:function() {
                this.queryHospitals(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("hospital",["queryHospitals","saveOrUpdateHospital","deleteHospital"]),
        // 删除
        deleteHandler(id) {
            this.deleteHospital({id}).then(res => {
                this.queryHospitals(this.params)
            })
        },
        // 修改
        editHandler(row) {
            this.dialogVisible = true
            this.form = row
            this.form.province = this.form.addresses[0]
            this.form.city = this.form.addresses[1]
            this.form.area = this.form.addresses[2]
            this.title = "修改医院信息"
        },
        // 保存
        saveHandler() {
            this.form.province = this.form.addresses[0]
            this.form.city = this.form.addresses[1]
            this.form.area = this.form.addresses[2]
            this.saveOrUpdateHospital(this.form).then(res => {
                this.queryHospitals(this.params)
                this.dialogVisible = false
            })
        },
        // 新增
        addHospitalHandler() {
            this.form = {}
            this.dialogVisible = true;
            this.title = "录入医院信息"
        },
        // 改变页码
        changeHandler(page) {
            this.params.page = page
        }
    }
}
</script>